<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <div id="app">
        <select name="" id="" v-model="sel">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <input type="checkbox" v-model="aaa" value="西瓜">西瓜
        <input type="checkbox" v-model="aaa" value="香蕉">香蕉{{aaa}}
          <input type="radio" name="a" v-model="sex" value="男">男
          <input type="radio" name="a" v-model="sex" value="女">女{{sex}}
          
      
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                  sel:'1',
                 aaa:[],
                 sex:''
            }
        })
    </script>
</body>

</html> -->
<!-- 三级联动 -->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="ux">
    <select v-model="sheng">
        <option v-for="(item,index) in arr":key="index" :value="index">{{item.name}}</option>
    </select>
    <select v-model="shi">
        <option v-for="(item,index) in arr[sheng].city" :key="index" :value="index">{{item.name}}</option>
    </select>
    <select v-model="qu">
        <option v-for="(item,index) in arr[sheng].city[shi].districtAndCounty" :key="index" :value="index">{{item}}</option>
    </select>
     <input type="radio" name="a" v-model="sex" value="男">男
 <input type="radio" name="a" v-model="sex" value="女">女{{sex}}
 <button @click="fn()">提交</button>
</div>
<script>
    new Vue({
        el: '#ux',
        data: {
            sex:'',
            sheng: 0,
            shi: 0,
            qu: 0,
            arr: [{
                name: "河北省",
                city: [{
                    name: "石家庄市",
                    districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
                }, {
                    name: "张家口市",
                    districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
                }, {
                    name: "承德市",
                    districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
                }, {
                    name: "秦皇岛市",
                    districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
                }]
            }, {
                name: "山西省",
                city: [{
                    name: "太原市",
                    districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
                }, {
                    name: "朔州市",
                    districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
                }, {
                    name: "大同市",
                    districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
                }, {
                    name: "阳泉市",
                    districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
                }]
            }],
        },
        methods: {
            //    fn(){
            //     console.log(this.arr[this.sheng].name);
            //     console.log(this.arr[this.sheng].city[this.shi].name);
            //     console.log(this.arr[this.sheng].city[this.shi].districtAndCounty[this.qu]);
            //    }
        }
    })
</script>